<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>

    <script>
        // 更新数据, dom 同步渲染

        let obj = {};

        let app = document.querySelector('#app')

        Object.defineProperty(obj, "name", {
            get: function () {
                console.log('get--');
                return app.innerHTML;
            },
            set: function (value) {
                console.log('set--' + value);
                app.innerHTML = value;
            }
        });


        // f12,在控制台读写 obj 的 name 属性

        // 本质就是给 obj 属性的读写添加监听函数

        /*
            vue 跟踪原理：
                1. data(状态) 读写时，被 get/set 拦截，触发监听器 watcher，
                2. watcher 是观察者，收集了 data 相关的依赖，发布者和订阅者
                3. 发布者通知订阅者进行数据更新
                4. 后期讲 虚拟 DOM 和 diff
        */
        /*
            vue3 变化
                Object.defineProperty 有一些缺点
                    1. 无法监听 es6 中 set 和 map 变化
                    2. 无法监听 class 类型的数据
                    3. 属性的新增或删除也无法监听
                    4. 数组元素的增加和删除也无法监听
            针对这些不足，ES6 Proxy 完美的解决了。
        */
    </script>
</body>

</html>